<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <title>Q2</title>
</head>
<body>
<div id="main" style="min-width: 600px; height: 800px;"></div>
</body>
<script>
    //初始化
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();//加载数据weibo-->weibodata
    $.ajax({
        url : "weibo.json",
        type : "get",
        async : "true",
        dataType : "json",
        success : function (weiboData) {
            myChart.hideLoading();//加载数据完成后隐藏动画
            //定义data方法将读取的微博数据根据经纬度组合成新的JSON
            //异步请求加载weibo.json数据,回调函数获取坐标数据
            Data = function (index) {
                data = weiboData[index];
                var px = data[0] / 1000;
                var py = data[1] / 1000;
                var res = [[px, py]];

                for (var i = 2; i < data.length; i += 2) {
                    var dx = data[i] / 1000;
                    var dy = data[i + 1] / 1000;
                    var x = px + dx;
                    var y = py + dy;
                    res.push([x, y, 1]);
                    px = x;
                    py = y;
                }
                return res;
            }
            //设置数值
            myChart.setOption({
                backgroundColor: '#404a59',
                //标题
                title : {
                    text:'点亮中国',
                    left:'center',
                    top:'top',
                    textStyle :{
                        color:'#fff'
                    }
                },
                //图例
                legend:{
                    left : 'left',
                    data : ['强','中','弱'],
                    textStyle :{
                        color:'#ccc'
                    }
                },
                //坐标
                geo:{
                    name : '强',
                    type : 'scatter',
                    map : 'china',
                    //不直接标签
                    label : {
                        emphasis : {
                            show:false
                        }
                    },
                    itemStyle : {
                        normal : {
                            areaColor: '#323c48',
                            borderColor : '#111'
                        },
                        emphasis : {
                            areaColor: '#2a333d'
                        }
                    }
                },
                //系列列表
                series:[{
                    name:'弱',
                    type:'scatter',
                    coordinateSystem:'geo',
                    symbolSize:1,
                    large:true,
                    itemStyle: {
                        normal:{
                            shadowBlur:2,
                            shadowColor:'rgba(36,140,249,0.8)',
                            color:'rgba(36,140,249,0.8)'
                        }
                    },
                    data:Data(0)
                },{
                    name:'中',
                    type:'scatter',
                    coordinateSystem:'geo',
                    symbolSize:1,
                    large:true,
                    itemStyle: {
                        normal:{
                            shadowBlur:2,
                            shadowColor:'rgba(14,241,242,0.5)',
                            color:'rgba(14,241,242,0.5)'
                        }
                    },
                    data:Data(1)
                },{
                    name:'强',
                    type:'scatter',
                    coordinateSystem:'geo',
                    symbolSize:1,
                    large:true,
                    itemStyle: {
                        normal:{
                            shadowBlur:2,
                            shadowColor:'rgba(255,255,255,0.0)',
                            color:'rgba(255,255,255,0.9)'
                        }
                    },
                    data:Data(2)
                }]
            });
        }
    })
</script>
</html>